<template>
	<view class="content">
		<!-- 电量显示栏-->
		<!-- 导航栏 -->
		<view class="top_tab">
			<view class="kong"></view>
			<view class="tab_wrap">
				<view class="left_tab" @click="returnPage">
					<view class="return_img" >
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/3.png"></image>
					</view>
					<view class="tab_name">划拨订单</view>
				</view>
				<view class="right_tab" @click="toCart">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/2.png"></image>
				</view>
			</view>
		</view>
		<view class="kong1"></view>
		<!-- 订单状态 -->
		<view class="order_status_tab">
			<view :class="currentIndex == index?'status_active':'status_item'" @click="orderStatus(index)" v-for="(item,index) in order_status" v-show="item.show" :key="index">
				<view class="status_name">{{item.status_name}}</view>
				<view class="hongtiao"></view>
			</view>
		</view>
		
		<!-- 订单内容 -->
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
		    <!-- 空白页 -->
		<view class="order_status_con" v-for="(item,index) in order_status" :id="class_id" :key="index" v-if="currentIndex == index">
			<block v-if="item.order != null && item.order != ''">
				<view class="order_con_wrap" v-for="(item1,index1) in item.order" :key="index1">
					<view class="order_con_box">
						<view class="order_wrap_top">
							<view class="order_no" >单号：{{item1.order_sn}}</view>
							<view v-if="item1.status == 0" class="status">待付款</view>
							<view v-else-if="item1.status == 1" class="status1">待收货</view>
							<view v-else-if="item1.status == 2" class="status2">已完成</view>
							<view v-else-if="item1.status == 3" class="status2">待划拨</view>
						</view>
						<view class="order_wrap_middle" style="padding-bottom: 0;">
							<view class="order_middle_left" v-if="item1.status">
								<image :src="Config_ysy.image_url + item1.posgoods.image"></image>
							</view>
							<view class="order_middle_right" style="padding-top:20upx;">
								<view class="price_heji" style="font-size: .5em;font-weight: 300;line-height: 2.5em;" v-if="item1.status">数量：{{item1.quantity}}</view>
								<view class="price_heji" style="font-size: .5em;font-weight: 300;line-height: 2.5em;" v-if="item1.status == 3">用户：{{item1.name}}</view>
								<view class="price_heji" style="font-size: .5em;font-weight: 300;line-height: 2.5em;" v-if="item1.status == 3">品牌：{{item1.posgoods.name}}</view>
							</view>
						</view>
						<view class="order_wrap_bottom">	
							<view class="price_heji" v-if="item1.status == 3" style="width: 51%;text-align: left;"><text style="font-size:.8em;">单价:￥{{item1.price}}</text></view>
							<view class="price_heji" style="width: 200upx;"><text style="font-size:.8em;">已付:￥{{item1.money}}</text></view>
							<view class="pingjia_btn" v-if="item1.status == 2">完成</view>
							<view class="pingjia_btn" v-if="item1.status == 3" @click="go_deliver(item1,index1)">划拨</view>
							<view class="pingjia_btn" v-else-if="item1.status == 1" @click="toPayOrder('sh',item1,index1)">确认收货</view>
							<view class="pingjia_btn" v-else-if="item1.status == 0" @click="toPayOrder('fk',item1)">付款</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="null_wrap">
					<view class="order_null">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/dingdankongkong.png"></image>
					</view>
					<view class="toVisit" @click="toMallList">去逛逛</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="order_status[currentIndex].loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		// components: {uniLoadMore},
		data() {
			return {
				currentIndex:0,
				"class_id"  :"",
				order_status:[
					{
						status_name:'待划拨',
						status:3,
						loadingType: 'more',
						page_num:1,
						show:this.showStatus(),
						order:[
							// {
							// 	order_no:'#151331',
							// 	order_status:'待付款',
							// 	goods_img:'../../static/detail/4.png',
							// 	goods_name:'华海威POS机',
							// 	price:'99.00',
							// 	goods_num:'2',
							// 	all_price:'198.00'
							// }
						]
					}
				],
				order_list_data:[],
				token:'',
			}
		},
		onShow(){
			var cache =  uni.getStorageSync('delete_array');
			if (cache !== "") {
				this.order_status[0].order.splice(cache,1);
				uni.removeStorageSync('delete_array');
			}
		},
		onLoad(option) {
			this.token=option.token
			this.loadData();
		},
		onReachBottom() {
			this.loadData(1);
		},
		methods: {
			showStatus(){
				let userStatus = uni.getStorageSync("userStatus");
				var status = 0;
				if (userStatus === "创客" || userStatus === "服务商" || userStatus === "合伙人"){ // todo 普通用户测试使用
					status = 1;
				}
				return status;
			},
			go_deliver(item,key){
				uni.navigateTo({url:'/pages/deliver/deliver?oid='+item.id+"&key="+key+'&token='+this.token})
			},
			//返回上一页
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			   },
			   //获取订单数据
			   loadData(source) {
				   //这里是将订单挂载到tab列表下
				   if (!this.currentIndex) {
				       this.currentIndex = 0;
				   }
				   let index = this.currentIndex;
				   let navItem = this.order_status[index];
				   let state = navItem.status;
				 
				   if (source === 'tabChange' && navItem.loaded === true) {
				       //tab切换只有第一次需要加载数据
				       return;
				   }
				   if (source == 1 && navItem.loadingType == 'noMore') {
						return;
				   }
				   
				  
				   navItem.loadingType = 'loading';
				   let params1 = {
				   		page_num:navItem.page_num,
				   		// 第几页，从1开始
				   		status:state,
						token:this.token
				   	};
				   if(state==-1){
				   	params1 = {
				   		page_num:navItem.page_num,
				   		// 第几页，从1开始
				   		status:"",
						token:this.token
				   	};
				   }
				   
				   var url1 = '/api/cshop/posorder/list'
				   this.Unfold_data.upload_data(params1, 'POST', url1, res => {
				   	if (res.statusCode == 200 && res.data.code == 1) {
				   		// console.log(this.order_status[0])
				   		// this.order_list_data = res.data.data;
				   		
				   		// let orderList = this.order_list_data.filter(item => {
				   		//     //添加不同状态下订单的表现形式
				   		//     // item = Object.assign(item, this.orderStateExp(item.status));
				   		//     if (state === -1) {
				   		//         //0为全部订单
				   		//         return item;
				   		//     }
				   		//     return item.status === state;
				   		// });
				   		// this.order_list_data.forEach(item => {
				   		//     navItem.order.push(item);
				   		// });
				   	
				   		
				   		//     navItem.loadingType = 'noMore';
				   		//     navItem.page_num = navItem.page_num + 1;
				   		    navItem.loadingType = 'more';
						if(res.data.data==null){
							    navItem.loadingType = 'noMore';
								return;
						}
						navItem.order = navItem.order.concat(res.data.data);
						navItem.page_num = navItem.page_num + 1;
							this.$set(navItem, 'loaded', true);
							
				   	} else if (res.statusCode == 200 && res.data.code == 401) {
				   		this.Unfold_data.showWindow(res.data.msg);
				   	} else {
				   		this.Unfold_data.showWindow(res.data.msg);
				   	}
				   });
			   },
			//根据状态获取订单数据
			orderStatus(index){
				this.currentIndex = index;
				if(index === 1){
				     this.class_id = "core_"	
				}else{
					this.class_id = ""	
				}
				// console.log(this.order_status[index].page_num)
				this.loadData('tabChange');
			},
			//跳转购物
			toMallList(){
				uni.navigateTo({
					url:'/pages/indexMallList/indexMallList?token='+this.token
				})
			},
			//付款
			toPayOrder(type,item,index){
				//订单付款
				if(type=="fk"){
					uni.navigateTo({
						url:'/pages/payOrder/payOrder?sid='+item.id+'&token='+this.token
					})
					//确认收获
				}else if(type=='sh'){
					uni.showModal({
						title: '温馨提示',
						content: '是否确认收货',
						success: res => {
							if (res.confirm) {
								let params1 = {
									order_id:item.id,
									token:this.token
								};
								var url1 = '/api/cshop/paypos/sureOrder'
								this.Unfold_data.upload_data(params1, 'POST', url1, res => {
									this.Unfold_data.upload_data({}, 'POST', '/api/usercenter/user', res => {
										if (res.statusCode == 200 && res.data.code == 1) {
											uni.setStorageSync("userStatus",res.data.data.user_level);
											uni.setStorageSync("parentMobile",res.data.data.puser.mobile);
										}
									});
									if (res.statusCode == 200 && res.data.code == 1) {
										this.order_status[this.currentIndex].order[index].status=2
										
									} else if (res.statusCode == 200 && res.data.code == 401) {
										this.Unfold_data.showWindow(res.data.msg);
									} else {
										this.Unfold_data.showWindow(res.data.msg);
									}
								});
							} else if (res.cancel) {
								
							}
						}
					});
					
				}
				
			},
			//跳转购物车
			toCart(){
				uni.navigateTo({
					url:'/pages/cart/cart&token='+this.token
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: #ededed;
	}
.content{
	width: 100%;
	padding-top: 60rpx;
	position: relative;
	.kong{
		width: 100%;
		height: 60rpx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	.top_tab{
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
		position: fixed;
		top: 60upx;
		left: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		.tab_wrap{
			width: 90%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			.left_tab{
				flex: 1;
				width: 100%;
				display: flex;
				align-items: center;
				.return_img{
					flex: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 36upx;
						height: 36upx;
					}
				}
				.tab_name{
					flex: 9;
					display: flex;
					align-items: center;
				}
			}
			.right_tab{
				visibility: hidden;
				flex: 1;
				text-align: right;
				image{
					width: 43upx;
					height: 41upx;
				}
			}
		}
	}
	.kong1{
		margin-top: 0upx;
		width: 100%;
		height: 8upx;
		background: #d6d6d6;
	}
	.order_status_tab{
		width: 100%;
		height: 100upx;
		background: #ffffff;
		display: flex;
		align-items: center;
		.status_active{
			flex: 1;
			height: 100upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.status_name{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 6upx solid #d6d6d6;
				color: #d74646;
			}
			.hongtiao{
				width: 100upx;
				height: 10upx;
				background: #d74646;
				margin-top: 10upx;
			}
		}
		.status_item{
			flex: 1;
			height: 100upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.status_name{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 6upx solid #d6d6d6;
			}
			.hongtiao{
				width: 100upx;
				height: 10upx;
				margin-top: 10upx;
			}
		}
	}
	.order_status_con{
		width: 90%;
		margin: 0 auto;
		height: 100%;
		.order_con_wrap{
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			margin-top: 20upx;
			border-radius: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.order_con_box{
				width: 90%;
				margin: 0 auto;
				.order_wrap_top{
					width: 100%;
					height: 80upx;
					border-bottom: 2upx solid #ededed;
					display: flex;
					align-items: center;
					.order_no{
						flex: 5;
						font-size: 28upx;
						color: #636363;
					}
					.status{
						flex: 1;
						text-align: right;
						color: #c25151;
						
					}
					.status1{
						flex: 1;
						text-align: right;
						color: #15ab15;
					}
					.status2{
						flex: 1;
						text-align: right;
						color: #169AF3;
					}
				}
				.order_wrap_middle{
					width: 100%;
					padding: 20upx 0;
					display: flex;
					justify-content: center;
					.order_middle_left{
						flex: 2;
						image{
							width: 157.2upx;
							height: 154.8upx;
							border-radius: 20upx;
						}
					}
					.order_middle_middle{
						flex: 3;
						.order_title{
							font-size: 36upx;
							font-weight: bold;
						}
						.order_peice{
							color: #a0a0a0;
							padding: 10upx 0;
						}
					}
					.order_middle_right{
						flex: 2;
						.order_price{
							font-weight: bold;
							text{
								font-size: 20upx;
								color: #a0a0a0;
							}
						}
						.order_num{
							text-align: right;
							color: #a0a0a0;
						}
					}
				}
				.order_wrap_bottom{
					width: 100%;
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 28upx;
					.quxiao_order{
						width: 160upx;
						height: 50upx;
						border-radius: 25upx;
						background: #e85c37;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						margin-right: 40upx;
					}
					.price_heji{
						font-size: 36upx;
						font-weight: bold;
						padding-right: 20upx;
						text{
							font-size: 24upx;
						}
					}
					.pingjia_btn{
						width: 150upx;
						height: 50upx;
						border-radius: 25upx;
						background-image: linear-gradient(top,#ac1327,#e74b58);
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
					}
				}
			}
		}
		.null_wrap{
			display: flex;
			height: 60vh;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.order_null{
				image{
					width: 368upx;
					height: 479upx;
				}
			}
			.toVisit{
				margin-top: 40upx;
				width: 200upx;
				height: 60upx;
				border-radius: 10upx;
				background-image: linear-gradient(top,#bd9a74,#f6d2a0);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
#core_{
	width: 100%;
}
#core_ .order_con_wrap{
	border-radius: 0;
}
#core_ .order_con_wrap .order_con_box .order_wrap_bottom{
	    height: 88upx
}
</style>
